<template>
  <div>
    <!-- Tab切换 -->
    <div ref="nav" :class="tabindex === 0 ? 'tab-box' : 'tab-box1'">
      <div class="tab-big">
        <div class="tab" ref="tabs" v-for="item, index in TabList" :key="index" @click="changeTab(index, item.id)"
          :class="{ active: currentIndex === index }">{{ item.classname }}</div>
      </div>
      <i class="iconfont icon2" v-show="tabindex === 1">&#xe617;</i>
    </div>
    <!-- tab栏的空位 -->
    <div class="box"></div>
    <!-- Swiper容器 -->
    <div class="swiper-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
      <div ref="swiperWrapper" class="swiper-wrapper">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // tab栏数据
    TabList: {
      type: Array,
      required: true
    },
    // 判断是首页还是动态
    tabindex: {
      type: Number,
      // 默认为首页
      default: 0
    }
  },
  data() {
    return {
      currentIndex: 0,
      startX: 0,
      moveX: 0,
      isTouching: false,
    };
  },
  methods: {
    // 切换Tab
    changeTab(index) {
      // 切换Tab时更新当前索引
      this.currentIndex = index;
      // 传给父组件用来请求接口
      this.$emit('changeTab', this.currentIndex + 1)
      // 计算滚动位置以使单击的选项卡居中
      const nav = this.$refs.nav; // 获取选项卡导航栏的引用
      const tab = this.$refs.tabs[index]; // 获取当前选中的选项卡的引用
      const scrollLeft = tab.offsetLeft - (nav.clientWidth - tab.clientWidth) / 2;  // 计算滚动左侧位置以居中当前选项卡
      //       const img = document.querySelectorAll('.swiper-slide')
      // console.log(img[index]);
      //       img[index].style.transition = 'all 1s ease'
      nav.scrollLeft = Math.max(0, Math.min(scrollLeft, nav.scrollWidth - nav.clientWidth));  // 设置滚动位置，确保在合理的范围内
    },
    onTouchStart(event) {
      this.isTouching = true;
      this.startX = event.touches[0].clientX;
      this.moveX = 0;
    },
    onTouchMove(event) {
      if (!this.isTouching) return;
      this.moveX = event.touches[0].clientX - this.startX;
    },
    onTouchEnd() {
      if (!this.isTouching) return;
      this.isTouching = false;
      const threshold = 50; // 设置滑动切换的阈值
      if (this.moveX > threshold && this.currentIndex > 0) {
        this.changeTab(this.currentIndex - 1);
      } else if (this.moveX < -threshold && this.currentIndex < this.TabList.length - 1) {
        this.changeTab(this.currentIndex + 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$width: 100%;

/* 样式Start... */
.tab-box,
.tab-box1 {
  background-color: #fff;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: $width;
  height: 54px;
  overflow-x: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  .tab-big {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A9A5A0;

    .tab {
      width: 50px;
      height: 54px;
      line-height: 54px;
      font-size: 17px;
    }
  }
}

.tab-box {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-top: 44px;

  .tab-big {
    width: 108%;
    padding-left: 10px;
    color: #000;

    .tab {
      width: 70px;
    }
  }
}

.icon2 {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 15px;
  margin-right: 20px;
}

.box {
  height: 54px;
}

.active {
  font-size: 20px !important;
  color: #FC5C82;
  font-weight: 700;
}

.swiper-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}


.swiper-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
}

/* 样式End... */
</style>
